吖冼的Blog

id选择器

202112081217328

类选择器

202112081215350

玩法： Google样式

See the Pen 类选择器 by Aeroxian (@Aeroxian) on CodePen.

标签选择器

202112081213294

通配符*全选择器

202112081216292

Combinator组合

Descend后代选择器

202112081301739

Child子选择器

TIP

这里的子 指的是 亲儿子 不包含孙子 重孙子之类

202112081300044

Adjacent Sibling相邻

202112081257664

General Sibling

202112081259877

比如有如下的html结构代码

<li>Item1</li>
<li>Item2</li>
<li>Item3</li>

当选择器为如下形式的时候,只有Item2,Item3为红色

li{
  color: green;
}

li ~ li{
  color: red;
}

See the Pen Sibling Genenal by Aeroxian (@Aeroxian) on CodePen.

交集选择器

TIP

select a tag that has the class

两个选择器之间不能有空格

202112081634183

1.3 清除默认样式（重要）

  1. 清除样式能够在开发中避免浏览器突然添加的默认样式（这会影响开发的预期效果）

从效率上来看并集选择器在书写上繁琐，但是效率比较高

// 通配符*全选择器
*{
	margin: 0;
    padding: 0;
}

// 并集选择器
div,p{
   margin: 0;
   padding: 0; 
}

属性选择器

202112081219231

202112142110428

普通选择器

E[attr="val"]

^属性开头

E[attr^="val"]  选择拥有attr属性且属性值为val开头的E元素

$属性结束

E[attr$="val"]  选择拥有attr属性且属性值以val结束的E元素

*包含属性

E[attr*="val"]   选择拥有attr属性且属性值中包含val的E元素

Grouping Rule

TIP

并集选择器通常用于集体声明 ，逗号隔开的（和的意思）

share the same declaration set

.main-nav__item a:hover, 
.main-nav__item a:active{
    color: white;
}

.main-nav__item a:hover{
    color: white;
}

.main-nav__item a:active{
    color: white;
}

Pseudo-classes 伪类选择器

202112081600641

TIP

Pseudo-classes - CSS: Cascading Style Sheets | MDN (mozilla.org)open in new window

:first-child 第一个元素

:last-child 最后一个元素

:nth-child

1. even偶数

TIP

四个单词的是偶数

2. odd 奇数

3. 表达式 a*n+b

4. 数字

:nth-last-child

类型选择器

:nth-of-type

TIP

参数同:nth-child

Expanding Cardsopen in new window

:nth-last-of-type

TIP

参数同:nth-child

状态选择器

input[type=radio]:checked

.wrap:nth-child(1):hover

a标签的伪元素love hate原则

a:link{
    color: red;
}
a:visited{
    color: green;
}
a:hover{
    color: blue;
}
a:active{
    color: yellow;
}

**玩法：**用a标签进行包裹，以便使用hover

a:hover .mask{
	display: block; // 显示
}

<a href="#">
	<!-- 遮罩 -->
	<div class="mask"></div>
	<img src="path">
</a>

Pseudo-elements

TIP

Pseudo-elements - CSS: Cascading Style Sheets | MDN (mozilla.org)open in new window

202112081600641

selection 选中的元素

div::selection { background: yellow; }

input 类型为range的标签

input[type = 'range']::-webkit-slider-runnable-track{}
input[type = 'range']::-webkit-slider-thumb{}

not

TIP

排除特定的选择器

.signup-form input:not([type="checkbox"]):focus,
.signup-form select:focus{
    outline: none;
    background-color: #d8f3cf;
    border: 1px solid #2ddf5c;
}
 





最后一个元素没有下划线

Live User Filteropen in new window

// 下划线得设置
&:not(:last-of-type){
    border-bottom: 1px solid $gray;
}

css 优先级

202112081225792